<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nomatch {
            border: red thin solid;
        }
        .Login{
            width: 100px;
            height:36px;
            float: right;
        }
        .el-form-item{
            margin-bottom: 60px;
        }
    </style>
    <link rel="stylesheet" href="assets/element/theme-chalk/index.css">
</head>

<body>
    <div id="app" style="width:500px; margin:auto">
        <h1 style="text-align: center;">{{helloMsg}}</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="姓氏">
                <el-input v-model="form.lastName" placeholder="姓氏"></el-input>
            </el-form-item>
            <el-form-item label="名字">
                <el-input v-model="form.firstName" placeholder="名字"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" placeholder="密码" show-password></el-input>
                <div style="color: red;">{{msgP}}</div>
            </el-form-item>
            <el-form-item label="重复密码">
                <el-input v-model="form.confirm" placeholder="重复密码" show-password></el-input>
                <div style="color: red">{{msgC}}</div>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input placeholder="电话号码" v-model="form.phone">
                    <template slot="prepend">+86</template>
                </el-input>
                <div style="color: red">{{msgPh}}</div>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="form.agreement">同意用户协议</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="Login"  :disabled="dis">立即注册</el-button>
            </el-form-item>

        </el-form>
    </div>

</body>
<script src="vue.js"></script>
<script src="assets/element/index.js"></script>
<script>
    app = new Vue({
        el: "#app",
        data() {
            return{
                helloMsg:"请注册",
                strength: 0,
                msgP: '',
                msgC: '',
                msgPh: '',
                form: {
                    firstName:'',
                    lastName:'',
                    password:'',
                    confirm:'',
                    phone:'',
                    agreement:false
                }
            }
        },
        computed: {
            Name() {
                let first = this.form.firstName;
                let last = this.form.lastName;
                /*const {fist,last } = this;*/
                return {
                    first,
                    last
                }
            },
            dis() {
                if (this.form.firstName != '' && this.form.lastName != ''
                    && this.msgP == '' && this.msgPh == ''
                    && this.msgC == '' && this.form.agreement == true) {
                    return false;
                } else return true;
            }
        },
        watch: {
            Name() {
                if (this.Name.first != '' && this.Name.last != '') {
                    this.helloMsg = "你好，"+this.Name.last+this.Name.first;
                } else {
                    this.helloMsg = "请注册";
                }
            },
            "form.password"(){
                let str = this.strength;
                if (/\d/.test(this.form.password)) str++;
                if (/[a-z]/.test(this.form.password)) str++;
                if (/[A-Z]/.test(this.form.password)) str++;
                if(str < 3 ) {
                    this.msgP = "密码强度不够，需包含数字和大小写";
                } else {
                    if (this.form.password.length < 8 ) this.msgP = "密码长度不够";
                    else {
                        this.msgP = ''
                    }
                }
            },
            "form.confirm"() {
                if (this.form.password != this.form.confirm) this.msgC = "密码不匹配"
                else this.msgC = ""
            },
            "form.phone"() {
                if (this.form.phone.length < 11) this.msgPh = '电话号码不符合规范'
                else this.msgPh = ''
            }
        }
    })
</script>

</html>
